<template>
	<div class="container">
		<!-- <st-navigation title="在线工地" @computedSize="handleComputedSize"></st-navigation> -->
		<u-gap height="8" bgColor="#F4F4F4"></u-gap>
		<view class="search-wrapper">
			<view class="search">
				<view class="input">
					<input style="width: 90%" type="text" placeholder="地址" confirm-type="search" v-model="searchValue"
						@blur="handleSearch" @confirm="handleSearch" @input="handleSearch">
					<uni-icons class="search_icon" type="search" color="#CECED9" size="22"
						@click="handleSearch"></uni-icons>
				</view>
			</view>
		</view>
		
		<view class="main">
			
			<scroll-view  scroll-y="true" :style="'height:'+ H" >
				<view v-for="(item, index) in liveList" :key="item.id" class="liveList">
					<view class="empty-wrap"></view>
					<view class="ysm-padding">
						<view class="ysm-mt" @click="handleClickVideo(index)">
							<view class="watch">
								<view class="image-w">
									<image src="/static/images/ysmDesignerShop/icon-3.png" mode="widthFix"></image>
								</view>
								<text>{{ item.viewed_num }}</text>
							</view>
							<video v-if="item.isAutoPlay" id="myVideo" class="video" :src="item.video" enable-danmu
								danmu-btn controls :poster-for-crawler="item.video_img" :title="item.title"
								:autoplay="item.isAutoPlay"></video>
							<view v-else>
								<image class="video" :src="item.video_img"></image>
								<image class="icon-play play-bg" src="/static/images/ysmMall/play-1.png"
									mode="widthFix"></image>
								<image class="icon-play play-triangle" src="/static/images/ysmMall/play-2.png"
									mode="widthFix">
								</image>
							</view>
						</view>
						<view class="info" @click="handleShowInfo(index)">
							<view class="left">开工日期: {{ item.createtime }}</view>
							<view class="right">
								<view class="address" style="margin-right: 18rpx;">地址: 上海市{{ item.addr }} </view>
								<view class="image-wrap">
									<image v-if="activeIndex === index" src="/static/images/siteLive/bottom.png"
										style="width:100%;">
									</image>
									<image v-else src="/static/images/siteLive/bottom.png" style="width:100%;"
										class="rotate-image"></image>
								</view>
							</view>
						</view>

						<view class="basic-wrap" v-show="activeIndex === index">
							<view class="basic-info-top">
								<view class="image-wrap">
									<!-- <image :src="item.user.avatar"></image> -->
									<StAvatar :designer="item.user"></StAvatar>

								</view>
								<view class="name">{{ item.user.username }}</view>
								<view class="" style="margin-right: 16rpx;margin-left: 8rpx;">
									<view v-if="item.user.is_online===1" class="d-flex a-center j-center"
										style="gap: 8rpx; width: 84rpx;height: 36rpx;border-radius: 8rpx;background-color: #E0FAD9;">
										<view class="rounded-circle"
											style="width: 12rpx;height: 12rpx;background-color: #6BC54A;">
										</view>
										<view class="d-flex a-center" style="">
											<text style="color: #76BD53;font-size: 20rpx;">在线</text>
										</view>
									</view>
									<view v-else class="d-flex a-center j-center"
										style="gap: 8rpx; width: 84rpx;height: 36rpx;border-radius: 8rpx;background-color: #E7E7E7;">
										<view class="rounded-circle"
											style="width: 12rpx;height: 12rpx;background-color: #818181;">
										</view>
										<view class="d-flex a-center" style="">
											<text style="color: #818181;font-size: 20rpx;">离线</text>
										</view>
									</view>
								</view>
								<view class="sub-title" @click="handleToShop(item.user,index)">进去逛逛>> </view>
							</view>

							<view class="basic-info-con">
								<view class="title">基本信息</view>
								<!-- <view class="item">业主：{{ item.owner }}</view> -->
								<view class="item">
									<view>业主：{{ item.owner }}</view>
									<view>项目经理：{{ item.manager }}</view>
								</view>
								<view class="item">
									<view>图纸面积：{{ item.area }}</view>
									<view>设计费：{{ item.work_salary }}</view>
								</view>
								<view class="item">
									<view>施工造价：{{ item.total_cost }}</view>
									<view>风格：{{ item.style }}</view>
								</view>
								<!-- <view class="item"> -->
								<!-- <view>设计师：{{ item.user.username }}</view> -->
								<!-- </view> -->
							</view>
						</view>
					</view>
				</view>
				<StEmpty v-if="isEmpty">暂无在线工地</StEmpty>
			</scroll-view>
		</view>

	</div>
</template>

<script>
	import StAvatar from '@/components/st-avatar/st-avatar.vue';
	import StEmpty from '@/components/st-empty/st-empty.vue';
	export default {
		components: {
			StEmpty,
			StAvatar
		},
		watch: {
			mainHeight(newVal) {
				let systemInfo = uni.getSystemInfoSync();
				// let temp = newVal + 116 + 'px'
				// this.H = `calc(100vh - ${temp})`
				// 54+24
				let px = uni.upx2px(108)
				this.H=(systemInfo.screenHeight-newVal-px-8)+ 'px'
			}
		},
		mounted() {
			// this.$nextTick(() => {
			//     setTimeout(() => {
			//         const query = uni.createSelectorQuery().in(this);
			//         query.select('.search-wrapper').boundingClientRect();
			//         query.exec((res) => {
			//             console.log('search-wrapper的高度：', res[0].height);
			// 			onsole.log(' res[0].height', res[0].height)
			// 			this.H=newVal- res[0].height+ 'px'
			//         });
			//     }, 500);
			// });
		},
		data() {
			return {
				// showScrollView: false,
				isEmpty: false,
				H: "",
				navBarHeight: 40,
				liveList: [],
				activeIndex: -1,
				searchValue: '',
				showClearIcon: false,
			};
		},
		// mounted() {
		// 	this.showScrollView = true;
		// },
		props: {
			mainHeight: {
				type: Number
			},
			dataSource: {
				type: Array,
				default: () => []
			},
		},
		methods: {
			scrollView(e) {
				console.log(e)
			},
			async getDataSource(params){
				console.log(111111111);
				await this.$api.get({
					url: '/wanlshop/user/getDesignerList',
					data: params,
					success: res => { 
						this.dataSource = res.data //数据 追加 
					},
				});	
			},
			// 获取在线工地信息
			async getSiteLiveInfo() {
				uni.showLoading({
					title: '加载中...',
					mask: true,
				});
				await this.$api.get({
					url: "/wanlshop/user/getBroadcastlist",
					data: {
						search: this.searchValue
					},
					success: (res) => {
						this.liveList = res.data;

						this.liveList = this.liveList.map((item) => {
							item.isAutoPlay = false;
							return item;
						});

						if (this.liveList.length == 0) {
							this.isEmpty = true;
						} else {
							this.isEmpty = false;
						}
					},
				});
				uni.hideLoading();

			},
			handleSearch() {
				// uni.navigateTo({
				// 	url: '/pagesYSM/ysmSearch/ysmSearch'
				// })
				this.getSiteLiveInfo();

			},
			handleShowInfo(index) {
				this.activeIndex === index ? this.activeIndex = -1 : this.activeIndex = index;
			},
			handleToShop(item,index) {
				let current_index=0;
				let data1 = this.dataSource.map((aitem,aindex) => {
					return {
						id: aitem.id,
						video: aitem.video,
						viewed_num: aitem.viewed_num,
						title: aitem.good_at,
						video_desc: aitem.video_desc,
						user_id: item.user_id
					}
				})
				
			 
				for (var i = 0; i < this.dataSource.length; i++) {
					 if(this.dataSource[i].user_id==item.id){
						 current_index = i;
					 }
				}
				
				var dataSource = uni.getStorageSync('dataSource'); 
				console.log("data1:",dataSource)
				console.log("item:",item)
				let data = dataSource;
				let current_data = {
					'id': item.id,
					'video': item.video,
					"viewed_num": item.viewed_num,
					"title": item.good_at,
					"video_desc": item.video_desc,
					'user_id': item.id
				}
				let current = encodeURIComponent(JSON.stringify(current_data));
				
				let params ="&dataSouce="+data+"&current="+current+"&current_index="+current_index;
				params =params+"&intro_data="+data+"&intro_current_index="+current_index+"&intro_current_data="+current;
				uni.navigateTo({
					url: `/pagesYSM/ysmDesignerShop/ysmDesignerShop?shop_id=${item.id}`+params
				}); 
			},
			handleComputedSize(evt) {
				let {
					navBarHeight
				} = evt;
				this.navBarHeight = navBarHeight;
			},

			handleClickVideo(index) {
				this.liveList.forEach(item => {
					this.$set(item, 'isAutoPlay', false)
				})
				this.liveList[index].isAutoPlay = !this.liveList[index].isAutoPlay;
				this.$set(this.liveList, index, this.liveList[index]);
				//调用接口增加浏览量 addUserBroadcastViewNum
				this.$api.get({
					url: "/wanlshop/user/addUserBroadcastViewNum",
					data: {
						id: this.liveList[index].id
					},
					success: (res) => {
						//不用处理
					},
				});
				console.log('this.liveLis:', this.liveList[index])
				/* console.log(item)
				item.isAutoPlay = !item.isAutoPlay;
				console.log(item) */
			},

		},
		created() {
			this.getDataSource();
			this.getSiteLiveInfo();
		},
	};
</script>

<style scoped lang="less">
	page {
		background-color: #fff;
	}

	.ysm-padding {
		padding: 32rpx;
	}

	.ysm-mt {
		margin-bottom: 32rpx;
		position: relative;

		.watch {
			height: 38rpx;
			position: absolute;
			top: 10rpx;
			left: 30rpx;
			z-index: 1;

			font-weight: 400;
			font-size: 26rpx;
			line-height: 36rpx;
			color: #FFFFFF;

			.image-w {
				display: inline-block;
				width: 38rpx;
				height: 38rpx;
				margin-right: 10rpx;
				vertical-align: middle;
			}

			image {
				width: 100%;
				height: 100%;
				// margin-right: 10rpx;
				z-index: 9999;
			}
		}

		.play-bg {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 88rpx;
			height: 88rpx;
		}

		.play-triangle {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 28rpx;
			height: 28rpx;
		}
	}

	page {
		height: 100%;
	}

	.container {
		background-color: #fff;
		height: 100%;

		.search-wrapper {
			// position: fixed;
			left: 0;
			display: flex;
			align-items: center;
			width: 100%;
			z-index: 10;
			background-color: #fff;
			padding-bottom: 16rpx;
		}

		.search {
			display: flex;
			align-items: center;
			background: #F6F7FB;
			border-radius: 80rpx;
			height: 60rpx;
			// padding: 24rpx 32rpx 16rpx;
			width: 90%;
			margin: 32rpx auto 0;
			position: relative;

			.input {
				width: 100%;
				font-weight: 400;
				font-size: 24rpx;
				// line-height: 34rpx;
				color: #333333;
				display: flex;
				justify-content: space-between;
				align-items: center;

				/deep/.uni-input {
					width: 90% !important;
				}
			}

			.search_icon {
				// position: absolute;
				// right: 20px;
				// top: 50%;
				// transform: translate(0, -50%);
			}
		}

		.liveList {
			// margin-top: 32rpx;
		}

		.empty-wrap {
			width: 100%;
			height: 16rpx;
			background: #f0f0f0;
		}

		.empty {
			margin-top: 20%;
		}

		.top-title {
			font-family: "PingFang SC";
			font-style: normal;
			font-weight: 400;
			font-size: 32rpx;
			line-height: 44rpx;
			color: #333333;
			margin-bottom: 24rpx;
		}

		.main {
			// margin-top: 120rpx;
		}

		.video {
			width: 100%;
			height: 380rpx;
			border-radius: 32rpx;
		}

		.info {
			display: flex;
			justify-content: space-between;
			align-items: center;

			font-weight: 400;
			font-size: 24rpx;
			line-height: 34rpx;
			color: #808080;
			// padding-left: 40rpx;
			// padding-right: 42rpx;

			.right {
				display: flex;
				align-content: center;
				margin-right: 20rpx;
				.address {
					// padding-right: 18rpx;
				}

				.image-wrap {
					width: 18rpx;
					height: 22rpx;

					// margin-right: 24rpx;
					.rotate-image {
						transform: rotate(-90deg);
					}

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.basic-wrap {

			.showInfo-enter-active,
			.showInfo-leave-active {
				transition: all 0.5s;
			}

			.showInfo-enter,
			.showInfo-leave-to {
				max-height: 0;
				opacity: 0;
				overflow: hidden;
			}

			.basic-info-top {
				display: flex;
				align-items: center;
				margin-top: 32rpx;
				margin-bottom: 32rpx;

				/deep/ .image-wrap {
					image {
						width: 100%;
						height: 100%;
					}

					.designer-avatar {
						width: 125rpx;
						height: 125rpx;

						.designer_level {
							height: 40rpx;
						}
					}
				}

				.name {
					font-weight: 600;
					font-size: 32rpx;
					line-height: 44rpx;
					color: #333333;
					margin-left: 24rpx;
					// margin-right: 24rpx;
				}

				.sub-title {
					font-weight: 400;
					font-size: 24rpx;
					line-height: 34rpx;
					color: #808080;
				}
			}

			.basic-info-con {
				display: flex;
				flex-direction: column;
				font-weight: 400;
				font-size: 24rpx;
				line-height: 34rpx;
				color: #808080;

				.title {
					font-weight: 600;
					font-size: 32rpx;
					line-height: 44rpx;
					color: #333333;
					margin-bottom: 32rpx;
				}

				.item {
					display: flex;
					font-weight: 400;
					font-size: 28rpx;
					line-height: 56rpx;
					color: #808080;

					view {
						flex: 1;
					}
				}
			}
		}

	}
</style>